<template>
	<view class="greyBox">
		<view class="topBlock">
			<view class="left" @click="screenPopup = true">
				筛选
				<view class="icon">
					<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_screen_supplier@2x.png"
						size="32"></u-icon>
				</view>
			</view>
			<view class="right" @click="toAddSales">
				<view class="icon">
					<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_newly_added_supplier@2x.png"
						size="32"></u-icon>
				</view>
				新增销售申请
			</view>
		</view>
		<view class="carItemList">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="contentBox">
					<view class="otherInfo">
						<view class="dateTime">
							<view class="icon">
								<u-icon
									name="https://supply.zhongyimotor.com/upload/applet/icon_time_grey_supplier@2x.png"
									size="32"></u-icon>
							</view>
							{{item.timeCreate}}
						</view>
						<view class="state green">{{salesTableType[item.status].label}}</view>
					</view>
					<view class="orderInfo">
						<view class="info">
							<view class="name">销售申请单号</view>
							<view class="rightBlock">{{item.id}}</view>
						</view>
						<view class="info">
							<view class="name">车辆入仓仓库</view>
							<view class="rightBlock sub">{{item.storeName}}</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<u-button size="mini" shape="circle" :custom-style="buttonStyleMini"
						@click="toDetails(item.id)">查看详情</u-button>
					<u-button size="mini" shape="circle" :custom-style="buttonStyleMini"
						v-if="item.status === 0">重新申请</u-button>

					<u-button size="mini" shape="circle" :custom-style="buttonStyleMini"
						@click="uploadPopup = true,handleId = item.id" v-if="item.status === 2">上传合同</u-button>
					<u-button size="mini" shape="circle" :custom-style="buttonStyleMini"
						v-if="item.status === 6 && !item.isDepositUploaded"
						@click="toEarnestMoney(item.id)">上传凭证</u-button>
				</view>
			</view>
		</view>
		<u-empty src="https://supply.zhongyimotor.com/upload/applet/maorder_kong_img@2x.png" icon-size="296"
			v-if="list.length == 0" margin-top="-168" :text="pageForm"></u-empty>
		<!-- <view class="addSales" v-if="isEmpty">
			<u-button type="success" shape="circle" @click="toAddSales" :custom-style="buttonStyle">新增销售申请</u-button>
		</view> -->

		<u-popup v-model="uploadPopup" mode="bottom" :closeable="true">
			<fileUpload ref="fileUpload" pageTitle="上传合同" @refresh="reLoad" :handleId="handleId"></fileUpload>
		</u-popup>
		<u-popup v-model="screenPopup" mode="top" :closeable="true">
			<view class="screenPopup">
				<view class="popupTitle">销售申请筛选</view>
				<view>
					<view class="fieldTitle">销售申请单号</view>
					<u-field label-width="0" v-model="pageform.id" placeholder="请输入销售申请单号"></u-field>
				</view>
				<view>
					<view class="fieldTitle">借款银行</view>
					<u-field label-width="0" v-model="bankName" placeholder="请选择借款银行" :disabled="true"
						@click="bankModelShow = true"></u-field>
				</view>
				<view class="actions">
					<view class="button">
						<u-button size="medium" shape="circle" :custom-style="buttonStyleMediumD"
							@click="reset">重置</u-button>
					</view>
					<view class="button">
						<u-button size="medium" type="success" shape="circle" :custom-style="buttonStyleMedium"
							@click="handleSearch">确定</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-select v-model="bankModelShow" @confirm="confirmBank" :list="bankList"></u-select>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {
		salesTableType
	} from '@/utils/status.js';
	import moment from "moment";
	import fileUpload from '@/components/fileUpload.vue';
	import {
		buttonStyle
	} from '@/utils/buttonStyle.js';
	export default {
		components: {
			fileUpload
		},
		data() {
			return {
				salesTableType,
				handleId: "",
				pageform: {
					size: 999,
					current: 1
				},
				screen: {
					id: ""
				},
				buttonStyleMediumD: {
					width: "300rpx",
					height: "86rpx",
					fontSize: "34rpx",
				},
				buttonStyleMedium: {
					width: "300rpx",
					height: "86rpx",
					color: "#FFF",
					background: "#0FBD7F",
					fontSize: "34rpx",
					boxShadow: "0rpx 4rpx 12rpx 0rpx rgba(1,139,31,0.5)"
				},
				buttonStyle,
				buttonStyleMini: {
					color: "#303030",
					width: "152rpx",
					height: "52rpx",
					fontSize: "26rpx",
					marginLeft: "20rpx"
				},
				list: [],
				uploadPopup: false,
				screenPopup: false,
				bankModelShow: false,
				bankList: [],
				bankName: "",
				pageForm: "您目前还没有销售申请～",
			}
		},
		onShow() {
			this.getSalesApplyList()
			this.getBankList();
		},
		methods: {
			reLoad() {
				this.getSalesApplyList();
				this.uploadPopup = false;
			},
			toEarnestMoney(id) {
				uni.navigateTo({
					url: '/pages/earnestMoney/index?type=0&innerId=' + id
				})
			},
			toDetails(id) {
				uni.navigateTo({
					url: '/pages/salesApply/salesDetails?id=' + id
				})
			},
			confirmBank(e) {
				this.pageform.bankId = e[0].value;
				this.bankName = e[0].label;
			},
			getBankList() {
				let that = this;
				that.$api.getBankList().then((res) => {
					res.result.forEach(item => {
						that.bankList.push({
							label: item.bankName,
							value: item.id
						})
					})

				})
			},
			reset() {
				this.pageform = {
					size: 999,
					current: 1
				}
				this.bankName = "";
				this.pageForm = "您目前还没有销售申请～"
				this.screenPopup = false;
				this.getSalesApplyList();
			},
			handleSearch() {
				this.getSalesApplyList();
				this.screenPopup = false;
				this.pageForm = "没有查询到数据"
			},
			getSalesApplyList() {
				let that = this;
				let params = that.pageform
				that.$api.getSalesApplyList(params).then((res) => {
					that.list = res.result.records;
					that.list.forEach(item => {
						item.timeCreate = moment(item.timeCreate).format('YYYY-MM-DD HH:mm:ss')
					})
				})

			},
			toAddSales() {
				uni.navigateTo({
					url: '/pages/salesApply/addSales'
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.addSales {
		margin-top: -580rpx;
	}

	.topBlock {
		display: flex;
		width: 690rpx;
		height: 68rpx;
		line-height: 68rpx;
		margin: 0 auto;

		.icon {
			margin-top: 5rpx;
		}

		.left {
			display: flex;

			.icon {
				margin-left: 8rpx;

			}
		}

		.right {
			display: flex;
			margin-left: auto;

			.icon {
				margin-right: 8rpx;
			}
		}
	}
</style>